HJS
AboutPostsProjects

상대 단위 em과 rem

em과 rem은 상대 단위로, 주로 글꼴 크기(font-size), 패딩(padding), 마진(margin) 등 다양한 속성에 사용됩니다.
px(픽셀)처럼 고정된 크기가 아닌, 기준값에 따라 크기가 유동적으로 변하는 것이 특징입니다.


1️⃣ em 단위란?

🔹 정의

🔹 예시

.parent {
  font-size: 20px;
}

.child {
  font-size: 1.5em; /* 1.5 * 20px = 30px */
}

🔹 중첩 주의

outer
middle
inner 

.outer {
  font-size: 16px;
}

.middle {
  font-size: 1.5em; /* 24px */
}

.inner {
  font-size: 1.5em; /* 1.5 * 24px = 36px */
}

2️⃣ rem 단위란?

🔹 정의

🔹 예시

html
container 

html {
  font-size: 16px;
}

.container {
  font-size: 2rem; /* 2 * 16px = 32px */
}

✅ rem의 장점


3️⃣ 실전 사용 예

html {
  font-size: 62.5%; /* 10px 기준 */
}

h1 {
  font-size: 3rem; /* 30px */
}

p {
  font-size: 1.6rem; /* 16px */
}

.button {
  padding: 1em 2em; /* 상하 1em, 좌우 2em — 부모 폰트 크기 기준 */
}

✔️ html의 font-size를 62.5%(10px)로 바꿔 계산을 쉽게 합니다.


4️⃣ 결론

✔️ 대부분의 경우에는 rem을 기본 단위로 사용하고, 특수한 경우에안 em을 활용하는 것을 권장